<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
        <title>ECharts</title>
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="dist/echarts.js"></script>
        <script src="js/china.js"></script>
        <link rel="stylesheet" type="text/css" href="css/map.css"/>
    </head>
    <body>
        <div id="china-map"></div>
		<div class="right-ul">
			<h3>当前市级产品数量排名</h3>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
			</ul>
		</div>
		<div class="clear"></div>
		<div class="bottom-ul">
			<table border="1" cellspacing="" cellpadding="">
				<caption><h3>产品列表</h3></caption>
				<tr>
					<th>编号</th>
					<th>产品名称</th>
					<th>产品数量</th>
					<th>产品规格</th>
				</tr>
				<tr>
					<td>001</td>
					<td>Data</td>
					<td>5565</td>
					<td>1:30</td>
				</tr>
				<tr>
					<td>001</td>
					<td>Data</td>
					<td>5565</td>
					<td>1:30</td>
				</tr>
				<tr>
					<td>001</td>
					<td>Data</td>
					<td>5565</td>
					<td>1:30</td>
				</tr>
			</table>
		</div>
         <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('china-map'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
//				show: false //不显示提示标签
                formatter: '{a} <br/>{b} : {c}万吨', //提示标签格式
            },
            dataRange: {
					 min: 0,
					 max: 4000,
					 x: 'left',
					 y: 'bottom',
					 text: ['高', '低'], // 文本，默认为数值文本
					 calculable: true,
					textStyle:{color:"#fff"},//省份标签字体颜色
					 //splitNumber: 0,
					 //color: ['orangered', 'gold','yellow','lightgrey']
					 color: ['#ff3333', 'orange', 'yellow','lime','aqua'],//地图区块背景
				 },
				 toolbox: {
					 show: true,
					 orient: 'vertical',
					 x: 'right',
					 y: 'center',
					 feature: {
						 mark: {
							 show: true
						 },
						 dataView: {
							 show: true,
							 readOnly: false
						 },

						 saveAsImage: {
							 show: true
						 }
					 }
				 },
            series: [{
            		name:'全国',
                    type: 'map',
                    roam: true,
                    mapType: 'china',
                    hoverable: false,
                    scaleLimit: {
					min: 0.5,
					max: 1.5,
					},
					 itemStyle:{
							normal:{
								borderColor:'rgba(100,149,237,1)',
								borderWidth:0.5,
								areaStyle:{
									color: '#1b1b1b'//高亮颜色
								}
							}
						},
                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#000"}//省份标签字体颜色
                        },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#fff"}
                        }
                    },

                    data:[
                        {name: '黑龙江', value: 3544.1},
						{name: '吉林', value: 2805.7},
						{name: '内蒙古', value: 2250.8},
						{name: '山东', value: 2050.9},
						{name: '河南', value: 1853.7},
						{name: '河北', value: 1670.4},
						{name: '辽宁', value: 1403.5},
						{name: '山西', value: 862.7},
						{name: '四川', value: 765.7},
						{name: '云南', value: 747.3},
						{name: '新疆', value: 705.1},
						{name: '甘肃', value: 577.2},
						{name: '陕西', value: 543.1},
						{name: '安徽', value: 496.3},
						{name: '湖北', value: 332.9},
						{name: '贵州', value: 324.1},
						{name: '广西', value: 280.7},
						{name: '重庆', value: 259.7},
						{name: '江苏', value: 252.2},
						{name: '宁夏', value: 226.9},
						{name: '湖南', value: 188.8},
						{name: '天津', value: 107.3},
						{name: '广东', value: 77.9},
						{name: '北京', value: 49.4},
						{name: '浙江', value: 31.1},
						{name: '福建', value: 21.5},
						{name: '青海', value: 18.6},
						{name: '江西', value: 12.8},
						{name: '上海', value: 2.1},
						{name: '西藏', value: 0.8},
						{name: '海南', value: '-'}
                    ]
                }],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		myChart.on('click', function (params) {
				var city = params.name;
				//alert(city);
				//loadChart(city);
			});
    </script>

    </body>
</html>